<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>服务</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery-2.0.3.js"></script>
	<script src="js/bootstrap.js"></script>
	<style>
		* {
			box-sizing: border-box;
		}
		html,body {
			height: 100%;
			margin: 0 ;
			padding: 0;
			border: 0;
			background-color: #ffffff;
		}
		.shoubu {
			width: 100rem;
			height: 0.8rem;
			background-color: #cccccc;
		}
		.shoubu2 {
			width: 100%;
			height: 0.8rem;
			text-align: center;
			position: fixed;
			display:flex;
			justify-content: space-between;
		}
		.tu1 {
			width: 0.5rem;
			height: 0.5rem;
			margin: 0;
		}
		b {
			font-size: 0.35rem;
			margin: 0.15rem;
		}
		.tu2 {
			width: 0.5rem;
			height: 0.5rem;
			margin: 0.15rem;
		}
		.ren {
			margin: 0 auto;
			width: 100%;
			height: 1.7rem;
			background-color: #FD6B01;
			text-align: center;
		}
		.ren img {
			margin-top: 0.7rem;
		}
		.neirong {
			margin-top: 1rem;
			display: flex;
			justify-content: space-around;
		}
		.neirong p {
			margin-top: 0.2rem;
			font-size: 0.23rem;
			color: #080808;
		}
		.xian1 {
			width: 0.6rem;
			height: 0.01rem;
			border: 1px solid red;
			margin: 0.2rem auto 0 auto;
		}
		.xian2 {
			width: 0.6rem;
			height: 0.01rem;
			border: 1px solid aquamarine;
			margin: 0.2rem auto 0 auto;
		}
		.xian3 {
			width: 0.6rem;
			height: 0.01rem;
			border: 1px solid #FD6B01;
			margin: 0.2rem auto 0 auto;
		}
		.bianxian {
			width: 33%;
			text-align: center;
			border-right: 1px solid #FD6B01;
		}
		.wei {
			display:flex;
			justify-content: space-between;
			width: 100%;
			height: 0.8rem;
			background: #fff;
			border: 1px solid #ccc;
			text-align: center;
			position: fixed;
			bottom: 0;
		}
		.wei img {
			width: 0.5rem;
			height: 0.5rem;
		}
		.wei a {
			width: 24%;
			height: 0.8rem;
		}
		.qingchu {
			clear: both;
		}
		.tuzi1 p {
			font-size: 0.2rem;
		}
		.kong {
			width: 100%;
			height: 0.3rem;
			background-color: #f9f9f9;
			margin-top: 1rem;
		}
		.youhiu {
			width: 100%;
			height: 0.6rem;
			border: 1px solid #f9f9f9;
		}
		.youhiu img {
			width: 0.6rem;
			height: 0.6rem;
			margin-bottom: 0.2rem;
			margin-left: 0.5rem;
		}
		.youhiu span {
			font-size: 0.3rem;
			margin-left: 0.5rem;
			color: dimgrey;
		}
		.fma {
			width: 100%;
			height: 0.6rem;
			border: 1px solid #f9f9f9;
		}
		.fma img {
			width: 0.7rem;
			height: 0.7rem;
			margin-bottom: 0;
			margin-left: 0.45rem;
			opacity: 0.5;
		}
		.fma span {
			font-size: 0.3rem;
			margin-left: 0.5rem;
			color: dimgrey;
		}
		.kongde {
			width: 100%;
			height: 0.3rem;
			background-color: #f9f9f9;
		}
		.fuwu {
			width: 100%;
			height: 0.6rem;
			border: 1px solid #f9f9f9;
			margin-bottom: 1rem;
		}
		.fuwu img {
			width: 0.4rem;
			height: 0.4rem;
			margin-bottom: 0.3rem;
			margin-left: 0.6rem;
			opacity: 0.5;
		}
		.fuwu span {
			font-size: 0.3rem;
			margin-left: 0.5rem;
			color: dimgrey;
		}
	</style>
</head>
<body>
<div class="shoubu">
	<div class="shoubu2">
		<a href="小米.html">
			<img class="tu1" src="jiantou.png" alt=""/>
		</a>
		<b>个人中心</b>
		<a href="#">
			<img class="tu2" src="sousuo.png" alt=""/>
		</a>
	</div>
</div>
<div class="ren">
		<img src="rentou.png" alt=""/>
</div>
<div class="neirong">
	<a class="bianxian" href="#"><img src="dingdan.png" alt=""/>
		<p>全部订单</p>
		<div class="xian1"></div>
	</a>
	<a class="bianxian" href="#"><img src="zhifu.png" alt=""/>
		<p>待付款</p>
		<div class="xian2"></div>
	</a>
	<a class="bianxian" href="#"><img src="shouhuo.png" alt=""/>
		<p>待收货</p>
		<div class="xian3"></div>
	</a>
</div>
<div class="kong"></div>
<div class="youhiu">
	<img src="youhiu.png" alt=""/>
	<span>我的优惠</span>
</div>
<div class="fma">
	<img src="fma.png" alt=""/>
	<span>F码通道</span>
</div>
<div class="kongde"></div>
<div class="fuwu">
	<img src="fuwu.png" alt=""/>
	<span>我的服务</span>
</div>
<div class="wei">
	<a href="小米.html">
		<div class="tuzi1">
			<img src="weitu11.png" alt=""/>
			<p>商城</p>
		</div>
	</a>
	<a href="小米商品分类.html">
		<div class="tuzi1">
			<img src="weitu22.png" alt=""/>
			<p>分类</p>
		</div>
	</a>
	<a href="购物车.html">
		<div class="tuzi1">
			<img src="weitu33.png" alt=""/>
			<p>购物车</p>
		</div>
	</a>
	<a href="购物车.html">
		<div class="tuzi1">
			<img src="weitu44.png" alt=""/>
			<p>服务</p>
		</div>
	</a>
	<div class="qingchu"></div>
</div>
</div>
</body>
</html>
<script>
	$(function(){
		function fullwidth() {
			if ($('body').width() >= 720){
				$('html').css('font-size',100 + 'px');
				return;
			}
			var scale = $('body').width() / 720;
			$('html').css('font-size',100*scale + 'px');
		}
		fullwidth();
		$(window).resize(function(){
			fullwidth();
		})
	});
</script>